<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical"
    :collapse="isCollapse"
    @select="handleSelect"
    background-color="#001529"
    text-color="#DCDCDC"
    active-text-color="#fff"
  >
    <template v-for="item in menuData" :key="item.index">
      <el-sub-menu v-if="item.children" :index="item.index">
        <template #title>
          <el-icon><component :is="getIconComponent(item.icon)" /></el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          v-for="child in item.children"
          :key="child.index"
          :index="child.index"
        >
          <el-icon><component :is="getIconComponent(child.icon)" /></el-icon>
          <span>{{ child.title }}</span>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="item.index">
        <el-icon><component :is="getIconComponent(item.icon)" /></el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { ref } from "vue";
import * as icons from "@element-plus/icons-vue"; // 修改这里，导入所有图标
let activeIndex = ref(null);
// 获取图标组件
const getIconComponent = (iconName) => {
  return icons[iconName] || null;
};

const props = defineProps({
  menuData: {
    type: Array,
    required: true,
  },
  isCollapse: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["menuSelect"]);
// 在菜单点击事件中应该有这样的代码
const handleSelect = (index) => {
  emit("menuSelect", index);
};
</script>
<style scoped></style>
<style>
.el-menu-item.is-active {
  background-color: #007ef6 !important; /* 使用 !important 确保覆盖 */
}
</style>
